<template>
	<div class="context">
		<h2 class="h2">审核店铺列表</h2>
		<table id="table">
			<tr>
				<th style="width: 150px;">头像</th>
				<th style="width: 100px;">店铺编号</th>
				<th style="width: 200px;">店铺名</th>
				<th style="width: 100px;">状态</th>
				<th style="width: 150px;">电话</th>
				<th style="width: 330px;">店铺地址</th>
				<th style="width: 100px;">操作</th>

			</tr>
			<tr class="tr" v-for="(item,index) in shop" :key="index">
				<td> <img :src="item.headPortrait" width="100" height="100"></td>
				<td v-text="item.id"></td>
				<td v-text="item.shopName"></td>
				<td v-if="item.state == '0'">正常</td>
				<td v-if="item.state == '1'">冻结</td>
				<td v-if="item.state == '2'">审核中</td>
				<td v-text="item.phone"></td>
				<td v-text="item.address"></td>
				<td><el-button type="primary"  @click="getAuditInfo(item.id)">详情</el-button></td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shop: [],
			}
		},
		methods: {
			getAuditShop(){
				this.$axios.get("/shop/listAuditShop")
				.then(res => {
					this.shop = res.shop
					
				})
			},
			getAuditInfo(shopId){
				this.$router.push({
					name: "AuditShopInfo",
					params:{
						shopId: shopId
					}
				})
			}
		},
		mounted() {
			this.getAuditShop()
		}
	}
</script>

<style>
	.context {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 20px;
		margin-top: -10px;
	}

	.h2 {
		height: 20px;
	}
	
	.common-layout .el-main {
		line-height: 40px;
	}
	
	.tr{
		
	}
	td{
		text-align: center;
	}
	
	#table{
		margin-top: 20px;
	}
	
	#table th{
		color: #909399;
	}
	
	#table td{
		color: #64666c;
	}
</style>
